<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../CSS/index.css"> -->
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .banner {
            width: 1000px;
            height: 700px;
            border: 1px solid;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 30% 70%;
        }

        .banLfet {
            /* background-color:green; */
            display: grid;
            grid-template-rows: 43% 57%;
        }

        .banLfet .top {
            font-size: 0;
            position: relative;
            /* background-color:red; */
            background-image: url(../images/bg.gif);
            background-repeat: no-repeat;
            border-radius: 50%;
        }

        .curImg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .retImg {
            opacity: 0;
        }

        .banLfet .bottom {
            /* background-color:pink; */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            line-height: 30px;
        }



        .banRight {
            /* background-color:orange; */
            display: grid;
            grid-template: repeat(20, 35px)/repeat(5, 140px);
            grid-auto-flow: column;
            flex-wrap: wrap;
        }

        .item {
            height: 35px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .item img {
            margin-left: 10px;
            height: 30px;
            /* transform:rotate(); */
            /* transition: ; */
            /* opacity: ; */
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="banLfet">
            <div class="top">
                <img src="../images/round.png" alt="" class="curImg" id="bannerImg">
                <img src="../images/values/0.png" alt="" class="curImg retImg">
            </div>
            <div class="bottom">
                <p>在心中默念任意选择一个两位数</p>
                <p>(或则说，从10~99之间任意选择一个数)</p>
                <p>把这个数字分别减去其十位和个位</p>
                <p>(列：选71，那就：71-7-1=63)</p>
                <p>在右图找到对应数字的图案</p>
                <p>然后点击上方阵型</p>
                <p>最后看结果对不对</p>
            </div>
        </div>
        <div class="banRight"></div>
    </div>

    <script src="../JS/index.js"></script>
</body>

</html>